<template>
    <d2-container>
        <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getOrggroupTree">刷新</el-button>
        </el-button-group>
        <el-popover placement="top-start" title="温馨提示" width="400" trigger="hover">
            <li>选择集团</li>
            <li>添加集团管理员</li>
            <li>为集团管理员分配所管理集团</li>
            <el-button slot="reference" size="small" icon="el-icon-info" style="float:right">操作提示</el-button>
        </el-popover>
        <el-row :gutter="10">

            <el-col :span="6" style="margin-top:15px;">
                <el-card shadow="hover" v-loading="treeLoading">
                    <el-tree ref="tree" class="filter-tree" node-key="id" highlight-current
                        :expand-on-click-node="false" default-expand-all :data="orggroupTree" :props="defaultProps"
                        @node-click="getOrggroupData">
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="18" style="margin-top:15px;">
                <el-card shadow="hover">
                    <!-- 搜索表头 -->
                    <template slot="header">
                        <el-form :inline="true" :model="searchForm" ref="searchForm" size="small" v-if="showHeader" class="searchHeader">

                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="searchForm.username" clearable placeholder="请输入用户名" />
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="getDataTable">
                                    <d2-icon name="search" />
                                    查询
                                </el-button>
                                <el-button @click="handleFormReset">
                                    <d2-icon name="refresh" />
                                    重置
                                </el-button>
                            </el-form-item>

                        </el-form>
                    </template>

                    <!-- 表格表头 -->
                    <div class="table-header">
                        <div>
                            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                                @click="addAdmin()" v-if="isAuth()">添加集团管理员
                            </el-button>
                            <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                            <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                        </div>
                        <div>
                            <el-button size="small" round icon="el-icon-refresh" @click="getDataTable()"
                                v-if="isAuth()"></el-button>
                            <el-button size="small" round icon="el-icon-share" v-if="isAuth()"></el-button>
                            <el-button size="small" round icon="el-icon-search" @click="changeHeader()" v-if="isAuth()">
                            </el-button>
                        </div>
                    </div>

                    <!-- 表格表体 -->
                    <el-table :data="tabledata" @current-change="currentChange">
                        <el-table-column type="index" width="50" header-align="center" align="center">
                        </el-table-column>
                        <el-table-column prop="groupName" header-align="center" align="center" show-overflow-tooltip
                            label="所属集团">
                        </el-table-column>
                        <el-table-column prop="username" header-align="center" align="center" show-overflow-tooltip
                            label="员工姓名">
                        </el-table-column>
                        <el-table-column prop="phone" header-align="center" align="center" show-overflow-tooltip
                            label="手机号">
                        </el-table-column>
                        <el-table-column prop="idCard" header-align="center" align="center" show-overflow-tooltip
                            label="身份证号">
                        </el-table-column>
                        <el-table-column prop="lockFlagDesc" header-align="center" align="center" show-overflow-tooltip
                            label="账号状态">
                        </el-table-column>
                        <el-table-column prop="createdTime" header-align="center" align="center" show-overflow-tooltip
                            label="创建时间">
                        </el-table-column>
                        <el-table-column fixed="right" header-align="center" align="center" width="220" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="createAccount(scope.row.userId)"
                                    class="el-icon-setting" v-if="isAuth()">分配账号
                                </el-button>
                                <el-button type="text" size="small" @click="resetPassword(scope.row.userId)"
                                    class="el-icon-setting" v-if="isAuth()">设置密码
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>

                    <div style="clear:both;height:30px;margin-top:10px;">
                        <!-- 表格表尾 -->
                        <ec-pagination :page="page" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </ec-pagination>
                    </div>

                </el-card>
            </el-col>
        </el-row>
        </add-orggroup>
    </d2-container>
</template>

<script>
    import * as admingroupService from '@/api/upms/admingroup'
    import * as groupService from '@/api/upms/group'
    import * as userService from '@/api/upms/user'
    import * as userAccountService from '@/api/upms/useraccount'

    export default {
        data() {
            return {
                searchForm: {
                    username: '',
                    pk_group: '',
                    pk_org: ''
                },
                page: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                orggroupTree: [],
                defaultProps: {
                    id: 'pkGroup',
                    label: 'name',
                    pid: 'pkFathergroup',
                    children: 'children',
                },
                showHeader: true,
                treeLoading: false,
                tabledata: [],
                orggrouptabledata: [],
                multipleSelection: [],
                loading: false,
                userId: '',
                orggrouploading: false,
                addAdminVisible: false,
                addOrggroupVisible: false,
            }
        },
        components: {
        },
        created() {
            this.getDataTable()
            this.getOrggroupTree();
        },
        methods: {
            // 获取数据列表
            getDataTable() {
                this.loading = true
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    username: this.searchForm.username,
                    pk_group: this.searchForm.pk_group,
                    user_type: 'group'
                };
                userService.getuserPage(query).then(data => {
                    this.tabledata = data.list;
                    this.page.total = data.totalCount;
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            getOrggroupTree() {
                this.treeLoading = true;
                groupService.getgroupsimpletree().then(data => {
                    this.orggroupTree = data;
                    this.treeLoading = false;
                });
            },
            //切换页数
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
            },
            // 翻页
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
            },
            // 切换显示搜索表头
            changeHeader() {
                this.showHeader = !this.showHeader
            },
            // 重置搜索表单
            handleFormReset() {
                this.$refs.searchForm.resetFields()
            },
            // 新增 / 修改   管理组织
            addOrggroup() {
                if (this.userId == '') {
                    this.$message.error("请选择管理员！");
                    return;
                } else {
                    this.addOrggroupVisible = true
                    this.$nextTick(() => {
                        this.$refs.addOrggroup.init(this.userId)
                    })
                }

            },
            addAdmin(id) {
                this.addAdminVisible = true
                this.$nextTick(() => {
                    this.$refs.addAdmin.init(id)
                })
            },
            createAccount(userId) {
                if (userId) {
                    this.$confirm("确认分配账号？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消"
                    }).then(() => {
                        userAccountService.createAccount({
                            userId: userId
                        }).then(data => {
                            this.$message({
                                message: data,
                                type: 'success'
                            });
                        })
                    });
                }
            },
            resetPassword(userId) {
                if (userId) {
                    this.$confirm("确认重置密码？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消"
                    }).then(() => {
                        userService.resetPassword(userId).then(data => {
                            if (data.code == 200) {
                                this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }

                        })
                    });
                }
            },
            currentChange(row) {
            },
            // 删除
            deleteorggroupHandle(id) {
                if (id) {
                    this.$confirm("确认删除？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        admingroupService.deladmingroup(id).then(() => {
                            this.getRelationOrggroupData();
                        });
                    });
                }
            },
            getOrggroupData(data) {
                let code = data.pkGroup;
                // 查询当前集团下的管理员档案
                this.searchForm.pk_group = code
                this.getDataTable()
            },
        }
    }
</script>